<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">		
		<title>Sky Mega Menu</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
		
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if lt IE 10]>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg-cyan">
		<div class="body">		
			<!-- mega menu -->
			<ul class="sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-icons">
				<!-- home -->
				<li>
					<a href="#"><i class="fa fa-single fa-home"></i></a>
				</li>
				<!--/ home -->
				
				<!-- about -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-star"></i>About us</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
							<li aria-haspopup="true">
								<a href="#"><i class="fa fa-group"></i>Our Team</a>
								<div class="grid-container3">
									<ul>
										<li aria-haspopup="true">
											<a href="#"><i class="fa fa-male"></i>Markus Fisher</a>
											<div class="grid-container3">
												<ul>
													<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
													<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
													<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
												</ul>
											</div>
										</li>
										<li aria-haspopup="true">
											<a href="#"><i class="fa fa-female"></i>Leyla Sparks</a>
											<div class="grid-container3">
												<ul>
													<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
													<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
													<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
												</ul>
											</div>
										</li>
										<li aria-haspopup="true">
											<a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
											<div class="grid-container3">
												<ul>
													<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
													<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
													<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
												</ul>
											</div>
										</li>
										<li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a>
									</li>
									</ul>
								</div>
							</li>
							<li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></a></li>
							<li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></a></li>
						</ul>
					</div>
				</li>
				<!--/ about -->
				
				<!-- news -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-bullhorn"></i>News</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="fa fa-check"></i>Company</a></li>
							<li><a href="#"><i class="fa fa-check"></i>Products</a></li>
							<li><a href="#"><i class="fa fa-check"></i>Specials</a></li>
						</ul>
					</div>
				</li>
				<!--/ news -->
				
				<!-- portfolio -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-briefcase"></i>Portfolio</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="fa fa-lemon-o"></i>Logos</a></li>
							<li><a href="#"><i class="fa fa-globe"></i>Websites</a></li>
							<li><a href="#"><i class="fa fa-th-large"></i>Branding</a></li>
							<li><a href="#"><i class="fa fa-picture-o"></i>Illustrations</a></li>
						</ul>
					</div>
				</li class="right">
				<!--/ portfolio -->
				
				<!-- register form -->
				<li aria-haspopup="true" class="right">
					<a href="#_"><i class="fa fa-lock"></i>Register</a>
					<div class="grid-container5">
						<form action="#">
							<fieldset>								
								<section>
									<label class="input">
										<i class="fa fa-append fa-envelope-o"></i>
										<input type="text" placeholder="Email address">
									</label>
								</section>
								
								<div class="row">
									<section class="col col-6">
										<label class="input">
											<i class="fa fa-append fa-user"></i>
											<input type="text" placeholder="First Name">
										</label>
									</section>
									<section class="col col-6">
										<label class="input">
											<i class="fa fa-append fa-user"></i>
											<input type="text" placeholder="Last Name">
										</label>
									</section>
								</div>
								
								<section>
									<label class="input">
										<i class="fa fa-append fa-lock"></i>
										<input type="password" placeholder="Password">
									</label>
								</section>
								
								<section>
									<label class="input">
										<i class="fa fa-append fa-lock"></i>
										<input type="password" placeholder="Confirm password">
									</label>
								</section>
								
								<button type="submit" class="button">Register</button>
							</fieldset>						
						</form>
					</div>
				</li>
				<!--/ register form -->
				
				<!-- login form -->
				<li aria-haspopup="true" class="right">
					<a href="#_"><i class="fa fa-sign-in"></i>Login</a>
					<div class="grid-container4">
						<form action="#">
							<fieldset>								
								<section>
									<label class="input">
										<i class="fa fa-append fa-user"></i>
										<input type="text" placeholder="Login or E-mail">
									</label>
								</section>
								
								<section>
									<label class="input">
										<i class="fa fa-append fa-lock"></i>
										<input type="password" placeholder="Password">
									</label>
								</section>
								
								<button type="submit" class="button">Login</button>
							</fieldset>						
						</form>
					</div>
				</li>
				<!--/ login form -->
			</ul>
			<!--/ mega menu -->
			
		</div>
	</body>
</html>